interface IRotate extends ng.IScope {
    show:boolean;
    src:string;
    rotate:(e:any)=>void;
    hide:()=>void;
    move:(x,y)=>void;
    cancleMove:()=>void;

    mainStyle:any;
    angle:number;
}


function tmsImgRotate($ngBootbox: BootboxService): ng.IDirective {
    return {
        restrict: 'E',
        templateUrl: './src/directives/tms-imgRotate/tms-imgRotate.html',
        transclude: true,
        scope: {

            src:"=",
            
        },
        link: ($scope: IRotate) => {
            var x0,y0,x1,y1,scale=1,angle=0,moveX=0,moveY=0,moveAnimate;
            $scope.show=false;
            var tms_img_con=$('#tms-img-rotate')
            var con=$('#tms-img-rotate-container');
            var img=$('#tms-img-rotate-container img');
            var imgCon=$('#imgCon');
            $('#ex1')['slider']({
                formatter: function(value) {
                    return '旋转角度: ' + value + "°";
                }}).on('slide',e=>{
                // console.log('sliding',e)
                angle=e.value*3.14159/180;
                var sin=Math.sin(angle);
                var cos=Math.cos(angle);

                img.css({transform:`matrix(${cos},${sin},${-sin},${cos},${moveX},${moveY})`});
                // img.css({})
            
            });
            resetModalSize();
            window.onresize=()=>{
                resetModalSize();
            }


            con['mousewheel']((e,delta)=>{
                // console.log(delta)
                scale=scale+delta*0.1;
          
                imgCon.css({transform:`scale(${scale})`})
              
                
            })
            $scope.move=(x,y)=>{
                
                moveAnimate=setInterval(()=>{
                    moveX=moveX+x*5*scale;
                    moveY=moveY+y*5*scale;
                    var sin=Math.sin(angle);
                    var cos=Math.cos(angle);
    
                    img.css({transform:`matrix(${cos},${sin},${-sin},${cos},${moveX},${moveY})`});
                },20)

                

            }
            $scope.cancleMove=()=>{
                clearInterval(moveAnimate);
            }

            $scope.hide=()=>{
                $scope.show=false;
                $scope.src="";
                moveX=0;
                moveY=0;
                angle=0;
                scale=1;
                angle=0;
                
            }

            $scope.$watch('src',(newV,oldV)=>{
                img.css({left:`0px`,top:`0px`});
                
                if(newV){
                    img.css({transform:`matrix(1,0,0,1,0,0)`});
                    imgCon.css({transform:`scale(1)`})
                    $scope.show=true;
                    resetModalSize();
                    
                }
            })


            function resetModalSize(){
                
                var width=document.documentElement.clientWidth
                var height=document.documentElement.clientHeight
                tms_img_con.css({
                    width:width,height:height
                })

            }

            

        }

    }
}


tmsImgRotate['$inject'] = ["$ngBootbox"]
angular.module('tmsImgRotate', []).directive('tmsImgRotate', tmsImgRotate);